<template>
	<view class="order-detail">
		<base-navbar back-color="#fff" title="订单详情"></base-navbar>
		<view class="card status">
			<view class="desc">
				<text class="label">订单状态：</text>
				<text class="value" v-if="detail.order_status == 0 && detail.trade.pay_status == 0">待支付</text>
				<text class="value" v-if="detail.order_status == 1 && detail.trade.pay_status == 1">待确认</text>
				<text class="value" v-if="detail.order_status == 2 && detail.trade.pay_status == 1">待服务</text>
				<text class="value" v-if="detail.order_status == 3 && detail.trade.pay_status == 1">服务中</text>
				<text class="value" v-if="detail.order_status == 4 && detail.trade.pay_status == 1">待评价</text>
				<text class="value" v-if="detail.order_status == 5 && detail.trade.pay_status == 1">交易已完成</text>
				<text class="value" v-if="detail.order_status == 6">已关闭</text>
				<text class="value" v-if="detail.order_status == 7">无效订单</text>
				<text class="value" v-if="detail.order_status == 8 && detail.trade.pay_status == 2">申请退款</text>
				<text class="value" v-if="detail.order_status == 9 && detail.trade.pay_status == 3">退款成功</text>
			</view>
			<view class="address" v-if="detail.service_type==0">
				<uni-icons type="location-filled" color="#e50909" size="24"></uni-icons>
				<view class="info">
					<view class="user">
						<text class="name">{{detail.consignee}}</text>
						<text class="phone" @click="callPhone(detail.mobile)">{{detail.mobile}}</text>
					</view>
					<view class="area">{{detail.formatAddress}}</view>
				</view>
			</view>
			<view class="address" v-if="detail.service_type==1">
				<view class="info">
					<view class="user">
						<text class="name">联系人：{{detail.consignee}}</text>
					</view>
					<view class="area" @click="callPhone(detail.mobile)">联系电话：{{detail.mobile}}</view>
				</view>
			</view>
		</view>

		<view class="card store">
			<view class="store-name" v-if="detail.service_type==1">
				<uni-icons type="shop" size="24"></uni-icons>
				<text class="value">{{detail.store.name}}</text>
				<uni-icons type="right" color="#909399"></uni-icons>
			</view>
			<view class="goods-item" v-for="(item,index) in detail.goodsList" :key="index">
				<image class="thumb" :src="item.logo" mode="aspectFill"></image>
				<view class="info">
					<view class="name">{{item.name}}</view>
					<view class="price">￥{{item.sale_price}}</view>
				</view>
			</view>
			<c-cell>
				<c-cell-item name="商品总价" name-style="font-size: 28rpx;" :tips="'￥'+detail.total_amount"
					:arrow="false"></c-cell-item>
				<!-- <c-cell-item name="运费" name-style="font-size: 28rpx;" :tips="'￥'+detail.shipping_price"
						:arrow="false"></c-cell-item> -->
				<c-cell-item name="优惠" name-style="font-size: 28rpx;" :tips="'￥'+detail.discount"
					:arrow="false"></c-cell-item>
				<c-cell-item name="实付款" name-style="font-size: 28rpx;" :arrow="false" :border="false">
					<template #tips>
						<text class="cell-total-price">￥{{detail.pay_amount}}</text>
					</template>
				</c-cell-item>
			</c-cell>
		</view>

		<view class="card cell-detail">
			<view class="title">订单信息</view>
			<view class="cell">
				<!-- <view class="cell-item">
						<text class="label">积分</text>
						<text class="value">获得123积分</text>
					</view> -->
				<view class="cell-item">
					<text class="label">订单编号</text>
					<text class="value">{{detail.order_sn}}</text>
					<text class="copy" @click="copyTradeNo(detail.order_sn)">复制</text>
				</view>
				<view class="cell-item">
					<text class="label">创建时间</text>
					<text class="value">{{detail.create_time}}</text>
				</view>
				<view class="cell-item" v-if="detail.trade.pay_status==1">
					<text class="label">支付时间</text>
					<text class="value">{{detail.payment_time}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import checkLogin from '@/utils/login';
	import {
		ref,
		reactive,
		toRefs,
		inject
	} from 'vue';
	import {
		onLoad,
		onShow,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';

	const state = reactive({
		id: 0,
		detail: {}
	});

	onLoad((opt) => {
		if (opt.hasOwnProperty('id')) {
			state.id = opt.id;
		}
		//登录过期自动登录
		if (!checkLogin()) {
			pageRoute('/pages/users/login/login');
		} else {
			getOrderDetail();
		}
	});

	onShow(() => {});

	onPullDownRefresh((e) => {
		console.log("下拉刷新", e);
	});

	onReachBottom((e) => {
		console.log("上拉加载更多", e);
	});

	function getOrderDetail() {
		request.get('order/info', {
			id: state.id
		}).then(res => {
			console.log('订单详情', res);
			state.detail = res.data;
		});
	}

	function copyTradeNo(text) {
		uni.setClipboardData({
			data: text,
			success: function() {
				uni.showToast({
					title: '复制成功',
					icon: 'success',
					duration: 2000
				});
			}
		});
	}

	function callPhone(phoneNumber) {
		// 判断是否为非空字符串
		if (typeof phoneNumber === 'string' && phoneNumber.length == 11) {
			uni.makePhoneCall({
				phoneNumber: phoneNumber, // 电话号码
				success: function() {
					console.log('拨打电话成功');
				},
				fail: function(err) {
					console.log('拨打电话失败：', err);
				}
			});
		} else {
			console.log('电话号码不合法');
		}
	}

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	};

	function pageTabRoute(url) {
		uni.switchTab({
			url
		});
	};

	const {
		id,
		detail,
	} = toRefs(state);
</script>

<style lang="scss">
	.order-detail {
		padding: $margin-24;

		.card {
			margin-bottom: $margin-24;
			background-color: $bg-inverse-color;
			border-radius: $radius-12;

			&.status {
				.desc {
					display: flex;
					align-items: center;
					padding: $margin-24;
					border-bottom: 1rpx solid mix($white-color, $border-color, 35%);
				}

				.address {
					@include f-between;
					padding: $margin-24;

					.info {
						flex: 1;
						margin-left: $margin-12;

						.user {
							.name {
								color: $main-color;
								font-weight: 500;
							}

							.phone {
								margin-left: $margin-12;
							}
						}

						.area {
							margin-top: $margin-8;
							font-size: $font-24;
							color: $tips-color;
						}
					}
				}
			}

			&.store {
				.store-name {
					display: flex;
					align-items: center;
					padding: $margin-24 $margin-24 $margin-12;

					.value {
						font-size: $font-30;
						font-weight: 500;
						color: $main-color;
					}
				}

				.goods-item {
					@include f-between;
					padding: $margin-16 $margin-24;

					.thumb {
						width: 128rpx;
						height: 128rpx;
						background-color: $bg-color;
						border-radius: $radius-8;
					}

					.info {
						align-self: flex-start;
						flex: 1;
						margin-left: $margin-24;

						.name {
							font-weight: 500;
							font-size: $font-30;
							color: $main-color;
						}

						.price {
							margin-top: $margin-12;
							color: $error-color;
						}
					}
				}

				.cell-total-price {
					font-size: $font-32;
					color: $error-color;
				}
			}

			&.cell-detail {
				.title {
					padding: $margin-24;
					font-size: $font-30;
					color: $main-color;
					font-weight: 500;

					&::before {
						display: inline-block;
						width: 4rpx;
						height: 100%;
						background-color: $error-color;
						content: '';
						border-radius: $radius-half;
					}
				}

				.cell {
					padding: 0 $margin-24;

					.cell-item {
						display: flex;
						align-items: center;
						padding: $margin-8 0;

						.label {
							width: 180rpx;
							font-size: $font-24;
						}

						.value {
							flex: 1;
							margin-left: $margin-12;
							font-size: $font-24;
							color: $main-color;
							font-weight: 500;
						}

						.copy {
							font-size: $font-24;
							color: $error-color;
						}
					}
				}
			}
		}
	}
</style>